<template>
<div class="page-container">
    <div class="toolbar">
        <el-form :inline="true">
            <el-row class="search-button mt20">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="amount1" label="实体卡账户余额" width="180"></el-table-column>
                    <el-table-column prop="amount2" label="电子卡账户余额" width="180"></el-table-column>
                    <el-table-column prop="amount3" label="实物账户余额" width="180"></el-table-column>
                    <el-table-column prop="amount4" label="今天卡类销售余额" width="180"></el-table-column>
                    <el-table-column prop="amount5" label="今天实物销售余额" width="180"></el-table-column>
                    <el-table-column prop="amount6" label="往期末结余额" width="180"></el-table-column>
                    <el-table-column prop="amount7" label="总余额" width="180"></el-table-column>
                </el-table>
            </el-row>
        </el-form>
    </div>

    <!--表格内容栏-->
    <Jic-table
        :height="350"
        :data="pageResult"
        :columns="filterColumns"
        @findPage="findPage"
        :showBatchDelete="false"
        :showDetailOperation="false"
        :showDeleteOperation="false"
        @handleEdit="handleEdit"
        ref="JicTable">
    </Jic-table>

    <el-dialog class="el-dialog-style" title="审核" :visible.sync="dialogFormVisible" width="30%" center>
        <el-form :model="accountForm" ref="accountForm">
          <el-form-item label="结算时间：" label-width="125px" prop="date">
              <span>{{accountForm.date}}</span>
          </el-form-item>
          <el-form-item label="结算金额：" label-width="125px" prop="amount1">
              <span>{{accountForm.amount1}}</span>
          </el-form-item>
          <el-form-item label="确认结算金额：" label-width="125px" prop="amount2">
              <el-input v-model="accountForm.amount2" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="是否已结算：" label-width="125px" prop="status">
            <el-radio-group v-model="accountForm.status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" plain @click="dialogFormVisible = false" size="mini" class="cancelButton">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false" size="mini" class="searchButton">确认结算</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import JicTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
export default {
    components: {
        JicTable,
        KtButton
    },
    data() {
        return {
            pageResult: {},
            pageRequest: { pageNum: 1, pageSize: 10 },
            size: "small",
            filterColumns: [],
            columns: [{ prop: "areaCode", label: "结算时间", minWidth: 120},
                { prop: "areaName", label: "结算金额",minWidth: 120},
                { prop: "merchantName", label: "确认结算金额",minWidth: 120},
                { prop: "merchantId", label: "是否已结算", minWidth: 120},
                { prop: "coverageType", label: "更新时间", minWidth: 120}
            ],
            formLabelWidth: "120px",
            filters: {
                start: 1,
                limit: 10
            },
            tableData:[{
                amount1:'134.40',
                amount2:'455.44',
                amount3:'6866.14',
                amount4:'476.14',
                amount5:'684.14',
                amount6:'8646.14',
                amount7:'68664664.14',
            }],
            dialogFormVisible: false,
            accountForm:{
                date:'2012-12-12',
                amount1: 144.32,
                amount2: 144.32,
                status:null
            },   
        };
    },
    mounted() {
        this.initColumns();
        this.findPage();
    },
    methods: {
        
        // 处理表格列过滤显示
        initColumns: function() {
        var temp = [];

        $.each(this.columns, function(key, val) {
            temp.push(val);
        });
        this.filterColumns = temp;
        },
      
        findPage: function (data) {
            let that = this;
            if (data != null && data.start != null) {
                if (data.start != null) {
                this.pageRequest.pageNum = data.start;
                }
                if (data.limit != null) {
                this.pageRequest.pageSize = data.limit;
                }
            }
            if (that.filters == undefined || that.filters == null) {
                that.filters = {};
            }
            that.filters.start = this.pageRequest.pageNum;
            that.filters.limit = this.pageRequest.pageSize;
            this.utils.request.getRegionPageList(that.filters, function (res) {
                that.loading = false;
                if (res.data == null) {
                    res.data = [];
                    res.totle = 0;
                } else {
                    that.$refs.JicTable.findPage({content: res.data.rows, total: res.data.total});
                }
            });
        },
        handleEdit: function (data) {
            this.dialogFormVisible = true;
        },
    }
};
</script>

<style scoped lang='scss'>
</style>
